<template>
	<view class="one-row-three-box">
		<block v-for="(item, index) in imageSrcList" :key="item">
			<image mode="widthFix" class="imgs" :src="item" @click="previewImage(index)" />
		</block>
	</view>
</template>

<script setup lang="ts">
	import { defineProps } from 'vue';
	const props = defineProps({
		imageSrcList: Array || []
	});
	
	const previewImage = (index) => {  
	  // 调用uni.previewImage预览图片  
	  uni.previewImage({  
	    current: props.imageSrcList[index], // 当前显示图片的URL  
	    urls: props.imageSrcList // 需要预览的图片URL列表  
	  });  
	};  
</script>

<style lang="scss" scoped>
	.one-row-three-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		
		.imgs {
			width: calc(33.3333% - 12rpx);
			margin-bottom: 12rpx;
		}
		
		.imgs:nth-child(3n - 1) {
			margin: 0 12rpx;
		}
	}
</style>